<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .tab{
            width:400px;
        }

        .tab>li{
            width:100px;
            height:50px;
            border: 1px solid  black;
            text-align:center;
            float:left;
        }
        .tab li ul{
            margin-top:30px;
            background-color: pink;
            text-align:center;
            height:100px;
            display:none;
        }
        .tab>li.active{
            background-color:pink;
            color:red;
        }

    </style>




</head>
<body>
<ul class="tab">
    <li>七月
      <ul>
          <li>name:july</li>
          <li>age:30</li>
          <li>sex:female</li>
      </ul>

    </li>

    <li>小夕
      <ul>
          <li>name:xiaoxi</li>
          <li>age:28</li>
          <li>sex:male</li>
      </ul>
    </li>
    <li>小七
        <ul>
        <li>name:xiaoxi</li>
        <li>age:26</li>
        <li>sex:female</li>
       </ul>
    </li>


</ul>


</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
   $(function(){

       $(".tab>li").click(function() {
       $(".tab>li").each(function(){
           $(this).children("ul").hide();
       });
           $(this).addClass("active").children("ul").stop().show();
       });
       $(".tab>li>ul>li").click(function () {
           alert("成功");
       })
       })


















</script>

</html>